<template>
  <div>
      <div class="big">
        <header>
            <div class="sou">
                <div >
                    <img :src="require('../../assets/img/index(6).png')" alt="" class="img3">
                </div>
                <input type="text" placeholder="按内容输入" class="inp1">
            </div>
        </header>
        <div>
            <ul class="nav">
                <li>综合推荐
                    <span></span>
                </li>
                <li>销量
                    <span></span>
                </li>
                <li>价格
                    <span></span>
                </li>
                <li>好评度
                    <span></span>
                </li>
                <li>店铺
                    <span></span>
                </li>
            
                <li>
                    <img :src="require('../../assets/img/商品列表 (2).png')" alt="">
                    筛选
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="header3">
            <div class="sou2">
                <input type="text" value="筛选11.11大促商品" class="inp2">
            </div>
        </div>
        <div class="mid">
          <show-list :goodsList="goodsList"></show-list>
            <!-- <div class="box">
                <img :src="require('../../assets/img/商品列表 (3).png')" alt="" class="img4">
                <div class="rig">
                    <p>溪牧原山茶花洁面泡沫氨基酸...</p>
                    <p>敏感肌可用，控油祛痘、男女可用...</p>
                    <p><span>￥</span>999<span>￥1099 </span><span>&nbsp;&nbsp;&nbsp;999人已付款</span></p>
                    <p>11.11限1时299元起</p>
                    <p>999条评论&nbsp;99.9%好评</p>
                </div>
            </div>
            <div class="box">
                <img :src="require('../../assets/img/商品列表 (4).png')" alt="" class="img4">
                <div class="rig">
                    <p>水肌美男士清爽控油洗面奶100g</p>
                    <p>净透毛孔，温和不紧绷，清爽控油</p>
                    <p><span>￥</span>999<span>￥1099 </span><span>&nbsp;&nbsp;&nbsp;999人已付款</span></p>
                    <p>11.11限1时299元起</p>
                    <p>999条评论&nbsp;99.9%好评</p>
                </div>
            </div>
            <div class="box">
                <img :src="require('../../assets/img/商品列表 (5).png')" alt="" class="img4">
                <div class="rig">
                    <p>水肌美净肤洁面膏100g/支深...</p>
                    <p>深层清洁肌肤，温和又滋润，日本...</p>
                    <p><span>￥</span>199<span>￥499 </span><span>&nbsp;&nbsp;&nbsp;999人已付款</span></p>
                    <p>11.11限1时299元起</p>
                    <p>999条评论&nbsp;99.9%好评</p>
                </div>
            </div>
            <div class="box">
                <img :src="require('../../assets/img/商品列表 (6).png')" alt="" class="img4">
                <div class="rig">
                    <p>多芬男士+护理净油洁面泡沫2...</p>
                    <p>击退油光，净在掌握，有效控油...</p>
                    <p><span>￥</span>299<span>￥599 </span><span>&nbsp;&nbsp;&nbsp;999人已付款</span></p>
                    <p>11.11限1时299元起</p>
                    <p>999条评论&nbsp;99.9%好评</p>
                </div>
            </div>
            <div class="box">
                <img :src="require('../../assets/img/商品列表 (4).png')" alt="" class="img4">
                <div class="rig">
                    <p>贝德玛温和卸妆水粉水、蓝水...</p>
                    <p>懒人必备的四效合一卸妆水， 舒缓..</p>
                    <p><span>￥</span>999<span>￥1099 </span><span>&nbsp;&nbsp;&nbsp;999人已付款</span></p>
                    <p>11.11限1时299元起</p>
                    <p>999条评论&nbsp;99.9%好评</p>
                </div>
            </div> -->
        </div>
    </div>
  </div>
</template>

<script>
import { reqList } from '../../http/api';
export default {
  data() {
    return {
      // 1.初始值
      goodsList: [],
    };
  },
  mounted() {
    // $route 路径信息，取路径数据
    // $router 路由对象,用来跳转
    console.log(this.$route.query.id);
    //ajax
    reqList({
          cateid:this.$route.query.id,
          type:this.$route.query.type
        }).then(res=>{
      console.log(res);
      this.goodsList=res.data.list.goodData?res.data.list.goodData:[]
    })
  },
};
</script>
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.big {
  max-width: 7.5rem;
  margin: 0 auto;
  height: 14.9rem;
  overflow: hidden;
  background: linear-gradient(to bottom, #ff6141 13%, white 13%);
}
header {
  height: 1.16rem;
  background: #ff6345;
  overflow: hidden;
}
header .img3 {
  width: 0.32rem;
  height: 0.32rem;
  margin-top: 0.16rem;
  margin-left: 0.23rem;
  position: absolute;
  /* background: url(../../assets/img/index/index\ \(6\).png) no-repeat; */
  background-position: 0px 0px;
  background-size: 0.32rem 0.32rem;
}
header .sou {
  width: 7rem;
  height: 0.6rem;
  display: flex;
  justify-content: flex-start;
  margin: 0.3rem auto;
}
.inp1 {
  width: 7.11rem;
  height: 0.67rem;
  background: white;
  border-radius: 5px;
  border: 0;
  font-size: 0.27rem;
  color: #cacaca;
  text-indent: 0.68rem;
  line-height: 0.6rem;
}
.nav {
  height: 0.76rem;
  color: white;
  font-size: 0.28rem;
  display: flex;
  justify-content: space-around;
  line-height: 0.74rem;
}
.nav li:nth-of-type(1) {
  font-size: 0.32rem;
}
.nav span {
  display: block;
  width: 0.44rem;
  height: 2px;
  background: white;
  margin: 0 auto;
  display: none;
}
.nav li:hover span {
  display: block;
}
.nav li:nth-of-type(6) {
  width: 4em;
}
.nav li:nth-of-type(6) img {
  width: 0.24rem;
  height: 0.3rem;
  margin-top: 0.23rem;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}
.header3 {
  height: 1.16rem;
  overflow: hidden;
}
.header3 .sou2 {
  width: 7rem;
  height: 0.6rem;
  margin: 0.3rem auto;
}
.header3 .sou2 .inp2 {
  width: 7rem;
  height: 0.67rem;
  background: #fff4f2;
  border-radius: 5px;
  border: 0;
  font-size: 0.27rem;
  color: red;
  text-align: center;
  line-height: 0.6rem;
  border: 1px solid red;
  font-weight: 900;
}
.mid .box {
  height: 2.2rem;
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: space-between;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
}
.mid .box .img4 {
  width: 2.14rem;
  height: 2.2rem;
}
.mid .box .rig {
  width: 5rem;
  height: 2.2rem;
}
.mid .box .rig p:nth-of-type(1) {
  font-size: 0.34rem;
  font-weight: 900;
}
.mid .box .rig p:nth-of-type(2) {
  font-size: 0.3rem;
  color: #a5a5a5;
  line-height: 0.44rem;
}
.mid .box .rig p:nth-of-type(3) {
  color: red;
  font-size: 0.32rem;
  line-height: 0.6rem;
}
.mid .box .rig p:nth-of-type(3) span:nth-of-type(1) {
  color: red;
  font-size: 0.2rem;
}
.mid .box .rig p:nth-of-type(3) span:nth-of-type(2) {
  color: #989898;
  font-size: 0.2rem;
  text-decoration: line-through;
  font-weight: 900;
}
.mid .box .rig p:nth-of-type(3) span:nth-of-type(3) {
  color: #a5a5a5;
  font-size: 0.2rem;
}
.mid .box .rig p:nth-of-type(4) {
  width: 2.2rem;
  height: 0.32rem;
  background: red;
  color: white;
  font-size: 0.2rem;
  line-height: 0.32rem;
}
.mid .box .rig p:nth-of-type(5) {
  font-size: 0.2rem;
  color: #a5a5a5;
  line-height: 0.52rem;
}

</style>